
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Profile</title>
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/Personal.css">
    <script src="./js/vue.js"></script>
    <script src="./element-ui/lib/index.js"></script>

</head>
<body>

<div id="app">
    <el-header>
        <el-container>
            <div>
                <el-tabs v-model="menu1" @tab-click="handleClick">
                    <el-tab-pane label="首页" name="first"></el-tab-pane>
                    <el-tab-pane label="首页"></el-tab-pane>
                    <el-tab-pane label="首页"></el-tab-pane>
                    <el-tab-pane label="首页"></el-tab-pane>
                    <el-tab-pane label="首页"></el-tab-pane>
                    <el-tab-pane label="首页"></el-tab-pane>
                    <el-tab-pane label="首页"></el-tab-pane>
                    <el-tab-pane label="首页"></el-tab-pane>
                    <el-tab-pane label="首页"></el-tab-pane>
                    <el-tab-pane label="首页"></el-tab-pane>
                </el-tabs>
            </div>
            <div>
                <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
            <div>
                <el-dropdown split-button type="primary">
                    发布文章
                    <el-dropdown-menu>
                        <el-dropdown-item icon="el-icon-document">草稿箱</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div v-if="{login:false}">
                <el-button type="primary" @click="open" plain>
                            <span>
                                登陆
                            </span>
                    <el-divider direction="vertical"></el-divider>
                    <span>
                                注册
                            </span>
                </el-button>
            </div>
            <div v-if="{login:false}">
                <el-dropdown>
                    <i class=" el-icon-message-solid" style="font-size:30px;"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>评论</el-dropdown-item>
                        <el-dropdown-item>赞和收藏</el-dropdown-item>
                        <el-dropdown-item>新增粉丝</el-dropdown-item>
                        <el-dropdown-item>私信</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div v-if="{login:false}">
                <div><el-avatar :size="40" :src="circleUrl"></el-avatar></div>
            </div>
        </el-container>
    </el-header>

    <div class="container">

        <div class="left-column">
<div  class="user-info-block block shadow">
<el-card>
    <div class="profile-row">
        <img :src="avatarUrl" alt="用户头像" class="avatar">
        <input type="file" ref="fileInput" @change="handleFileChange" accept="image/*" style="display:none">
        <div>
            <h1 class="username">
                <span>别看了</span>
            </h1>
            <p class="description">这是一段个人简介。</p>
        </div>
        <div class="button-container">
            <el-button type="primary" @click="triggerFileInput">更换头像</el-button>
            <el-button type="primary" @click="goToProfileSettings">设置</el-button>
        </div>
    </div>
</el-card>
</div>
    <div class="header-content">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1" class="nav-item">
                <router-link to="/user/1590344390294795" aria-current="page" class="item-title">动态</router-link>
            </el-menu-item>
            <el-menu-item index="2" class="nav-item">
                <router-link to="/user/1590344390294795/posts" class="item-title">文章</router-link>
            </el-menu-item>
            <el-menu-item index="3" class="nav-item">
                <router-link to="/user/1590344390294795/columns" class="item-title">专栏</router-link>
            </el-menu-item>
            <el-menu-item index="4" class="nav-item">
                <router-link to="/user/1590344390294795/pins" class="item-title">沸点</router-link>
            </el-menu-item>
            <el-menu-item index="5" class="nav-item">
                <router-link to="/user/1590344390294795/collections" class="item-title">收藏集</router-link>
            </el-menu-item>
            <el-menu-item index="6" class="nav-item">
                <router-link to="/user/1590344390294795/tags" class="item-title">关注</router-link>
            </el-menu-item>
            <el-menu-item index="7" class="nav-item">
                <router-link to="/user/1590344390294795/robots" class="item-title">作品</router-link>
            </el-menu-item>
            <el-menu-item index="8" class="nav-item not-in-scroll-mode">
                <div class="item-title">赞</div>
            </el-menu-item>
            <el-menu-item index="11" class="search-icon-container">
                <router-link to="/user/1590344390294795/search?search_type=0">
                    <img src="//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/4faa6e4d3204581da39135d50cec3f73.svg" alt="" class="search-icon">
                </router-link>
            </el-menu-item>
        </el-menu>

    </div>
</div>
        <div class="right-column">
            <!-- 右侧内容区域，可根据需要添加内容 -->
<el-card class="box-card">
    <div slot="header" class="clearfix">
        <span>个人成就</span>
    </div>
    <!-- 统计项 -->
    <div class="stat-item" v-for="item in stats" :key="item.title">
        <svg-icon :icon-class="item.iconClass" width="25" height="25"></svg-icon>
        <span class="content">
            {{ item.title }}
            <span class="count">{{ item.count }}</span>
        </span>
    </div>


</el-card>
            <el-card class="user-card">
                <el-link
                        href="/user/1590344390294795/following"
                        class="follow-item"
                        :underline="false"
                        :class="{'router-link-exact-active route-active': isActive}"
                >
                    <div class="item-title">关注了</div>
                    <div class="item-count">4</div>
                </el-link>
                <el-link
                        href="/user/1590344390294795/followers"
                        class="follow-item"
                        :underline="false"
                >
                    <div class="item-title">关注者</div>
                    <div class="item-count">2</div>
                </el-link>
                <el-link
                        href="/user/1590344390294795/collections"
                        class="more-item"
                        :underline="false"
                >
                    <div class="item-title">收藏集</div>
                    <div class="item-count">2</div>
                </el-link>
            </el-card>

        </div>
    </div>
</div>
<script src="./js/Personal.js"></script>

</body>
</html>
